<template>
	<div class="container">
		
		<!-- 航班信息 -->
		<view class="flight">
			<view class="up">
				<text>{{orderList.companyName | getFlightName}}{{orderList.airlineName}}</text>
				<text>{{orderList.aircraftName}}</text>
				<text>{{orderList.startDate | getDate}}</text>
			</view>
			<view class="middle">
				<view class="start">
					<view class="time">{{orderList.startDate | getTime}}</view>
					<view>{{orderList.startAirportName |getAirport}}</view>
				</view>
				<view class="lineTo">
					<image src="../../static/icon/arrow.png" mode="widthFix"></image>
				</view>
				<view class="end">
					<view class="time">{{orderList.endDate | getTime}}</view>
					<view>{{orderList.endAirportName |getAirport}}</view>
				</view>
			</view>
			<view class="down">
				<text>舒适宽体机</text>|
				<text>{{orderList.isFan | getFan}}</text>|
				<text>免费行李</text>|
				<text>出票速度快</text>
			</view>
		</view>
		
	</div>
</template>

<script>
	import {PlaneOrder} from "../../common/bean.js"
	import {
		formatDate
	} from "../../common/utils.js"
	
	export default {
		name:"PlaneHeader",
		data() {
			return {
				
			};
		},
		filters:{
			getTime(time) {
				let date = new Date(time)
				return formatDate(date, 'hh:mm')
			},
			getDate(time) {
				let date = new Date(time)
				return formatDate(date, 'MM月dd日')
			},
			// 因为加载顺序（生命周期）的问题导致先执行的时候为空，做个空数据就好了
			getAirport(port) {
				return (port || "").slice(0, 4)
			},
			getFlightName(fly) {
				return (fly || "").slice(0, 1) + (fly || "").slice(2, 3)
			},
			getFan(fan) {
				return fan == 0 ? "有餐食" : "无餐食"
			},
		},
		props: {
			orderList: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		mounted() {
			console.log(this.orderList);
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 300rpx;
		// 航班信息
		.flight {
			margin: 0 20rpx 20rpx 20rpx;
			border-radius: 10rpx;
			padding: 30rpx;
			background-color: white;
		
			.up {
				font-size: 26rpx;
				display: flex;
				justify-content: space-around;
				margin-bottom: 10rpx;
				// text:nth-of-type(1){
		
				// }
			}
		
			.middle {
				display: flex;
				justify-content: space-around;
		
				.time {
					font-size: 42rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				
				.lineTo{
					width: 100rpx;
				}
			}
		
			.down {
				font-size: 26rpx;
				color: #cbcbcb;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>
